<template>
  <div id="appMain" style="width: 100%; height: 100%">
    <canvas id="appCanvas" ref="appCanvas"></canvas>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "electron vue"
    }
  },
  mounted: function () {
    var canvas = document.getElementById('appCanvas')
    var ctx = canvas.getContext('2d')
    ctx.rotate(-20 * Math.PI / 180)
    ctx.fillStyle = 'rgba(100,100,100,0.20)'
    ctx.font = '14px Arial'
    ctx.fillText('Hello Pabu!', 20, 120)
    var data = canvas.toDataURL('image/png', 1)
    var app = document.getElementById('appMain')
    app.style.backgroundImage = 'url(' + data + ')'
  },
  methods: {},
  beforeCreate () {
  },
  created () {
  }
}
</script>

<style>

  #appCanvas {
    position: absolute;
    width: 300px;
    height: 150px;
    display: none;
  }
</style>